<template>
    <div>
        <h1>index - {{accountSta}}</h1>

        <div id="add-goods">
            <ul>
                <li class="flex-center">
                    <div class="title">标题</div>
                    <div class="flex-col ipt-item">
                        <input type="text" placeholder="请输入标题">
                    </div>
                </li>
                <li class="flex-center">
                    <div class="title">分类</div>
                    <div class="flex-col ipt-item none-bd none-pad">
                        <select name="" id="" v-model="cate_id">
                            <option value="0">请选择</option>
                            <option :value="item.value" v-for="(item, index) in cate" :key="index" v-show="index !== cate_id">{{item.name}}</option>
                        </select>
                    </div>
                </li>
                <li class="flex-center">
                    <div class="title">描述</div>
                    <div class="flex-col ipt-item">
                        <input type="text" placeholder="请输入描述">
                    </div>
                </li>
                <li class="flex-center">
                    <div class="title">图片组</div>
                    <div class="flex-col ipt-item">
                        <textarea name="">//i8.mifile.cn/v1/a1/4036833f-6c84-9e30-f78e-08cc52768626.webp{split}//i8.mifile.cn/v1/a1/80985354-0503-fa3f-1a9c-aa56ba2d682d.webp{split}//i8.mifile.cn/v1/a1/6b474a18-ead1-b287-9e58-07b281487209.webp{split}//i8.mifile.cn/v1/a1/bc4751a7-cbc4-db03-db23-92c70fc1dbc9.webp</textarea>
                    </div>
                </li>
                <li class="flex-center">
                    <div class="title">原价</div>
                    <div class="flex-col ipt-item">
                        <input type="number" placeholder="请输入原价">
                    </div>
                </li>
                <li class="flex-center">
                    <div class="title">促销价</div>
                    <div class="flex-col ipt-item">
                        <input type="number" placeholder="请输入原价">
                    </div>
                </li>
                <li class="flex-center">
                    <div class="title">专柜价</div>
                    <div class="flex-col ipt-item">
                        <input type="number" placeholder="请输入原价">
                    </div>
                </li>
                <li class="flex-center">
                    <div class="title">详情图</div>
                    <div class="flex-col ipt-item">
                        <textarea name="">//i8.mifile.cn/v1/a1/63e56595-968f-5463-e818-26e38e8b1e33.webp?w=1080&h=1921&bg=173018{split}//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7c3de81161099eb22da8bd12036772c1.jpg?w=1080&h=1677&bg=FFFFFF{split}//i8.mifile.cn/v1/a1/d4344cf8-847e-b5f8-6ab4-a1516b98ca2b.webp?w=1080&h=1827&bg=0B110D</textarea>
                    </div>
                </li>
                <li class="flex-center">
                    <div class="title"></div>
                    <div class="flex-col ipt-item none-bd none-pad">
                        <button class="btn btn-blue" @click="saveGoods">保存</button>
                    </div>
                </li>
            </ul>
        </div>

        <div class="index-content">
            <ul>
                <li v-for="(item, index) in data.banner" :key="index">
                    <img :src="item" alt="">
                </li>
            </ul>
        </div>

        <button @click="save">保存</button>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import {checkIsLogin, createContentDetail} from 'common/js/common'
    import {index} from "api/index"
    import {commonCate} from 'common/js/config'

    export default {
        name: "index",
        data () {
            return {
                data: [],
                cate: [],
                cate_id: 0
            }
        },
        computed: {
            ...mapGetters([
                'accountSta'
            ])
        },
        methods: {
            saveGoods () {
                console.log(this.cate_id);
            },
            save () {
                let img = createContentDetail('banner', 1);
                console.log(img);
            },
            init () {
                //this.data = index();
                let resInd = index();
                console.log(resInd);
                resInd.banner.forEach((item) => {
                    console.log(item);
                })
            }
        },
        mounted () {
            //checkIsLogin(this, this.accountSta)
            this.init();

            this.cate = commonCate;
        }
    }
</script>

<style scoped>
    li {
        list-style: none;
    }
    input, textarea {
        outline: none;
    }
    select {
        width: 100%;
        height: 34px;
        line-height: 34px;
        border-radius: 5px;
        outline: none;
        border: 1px solid #dcddee;
        padding: 0 8px;
    }
    #add-goods {
        padding: 15px;
    }
    #add-goods li {
        margin-bottom: 20px;
    }
    #add-goods li .title {
        width: 38px;
        min-height: 2px;
        margin-right: 10px;
        text-align: right;
        padding-bottom: 5px;
    }
    #add-goods li .ipt-item {
        padding: 6px 10px;
        border: 1px solid #dcddee;
        border-radius: 5px;
    }
    #add-goods li .ipt-item.none-bd {
        border-width: 0;
    }
    #add-goods li .ipt-item.none-pad {
        padding: 0;
    }
    #add-goods li textarea {
        width: 100%;
        border: 1px solid #fff;
        height: 130px;
        resize: none;
    }
    #add-goods li input {
        width: 100%;
        border: 1px solid #fff;
    }
    #add-goods li .btn {
        width: 75px;
        height: 38px;
        line-height: 38px;
        border-radius: 5px;
        margin-top: 10px;
        background-color: #3789ff;
        color: #fff;
        text-align: center;
        outline: none;
        border: none;
    }
    #add-goods li .btn:active {
        background-color: #2d8cf0;
    }
</style>